import * as React from "react";
import { Button, Modal, Table, Input, message } from "antd";
import { AjaxData } from "../../../../../../data/interface/publicInterface";
import {
  terminalmanagementList, //终端列表
} from "../../../deviceseversapi";
import { ergodicListAddIdToKey } from "../../../../../../utils/common";
export interface ModalTerminalRedioProps {
  visible: boolean;
  onTerOk: (data: any) => any;
  onTerCancel: (data: any) => any;
}

export interface ModalTerminalRedioState {
  visible: boolean;
  selectedRowKeys: any[];
  typeId: string;
}

class ModalTerminalRedio extends React.Component<
  ModalTerminalRedioProps,
  ModalTerminalRedioState
> {
  private terminalcolumns = [
    {
      key: "name",
      title: "终端名称",
      dataIndex: "name",
      width: 200,
    },
    {
      key: "typeName",
      title: "协议名称",
      dataIndex: "typeName",
      width: 100,
    },
    {
      key: "address",
      title: "通讯地址",
      dataIndex: "address",
      width: 100,
    },
  ];
  private dataSouce: any[] = [];
  private pageIndex: number = 1;
  private pageSize: number = 20;
  private total: number = 0;
  private attr: string = "";
  state = { visible: false, selectedRowKeys: [], typeId: "" };
  render() {
    return (
      <>
        <Modal
          title="选择绑定终端"
          visible={this.state.visible}
          onOk={() => {
            this.onSubmit();
          }}
          onCancel={() => {
            this.props.onTerCancel({ visible: false });
          }}
        >
          <div>
            {/* <Terminal /> */}
            <div className="terminal_search">
              终端名称：
              <div className="changeType_btn d_inlineFlex">
                <Input
                  className="erminalinput"
                  placeholder="请输入终端名称"
                  value={this.attr}
                  onChange={(event) => {
                    this.attr = event.target.value;
                    this.forceUpdate();
                  }}
                />
              </div>
              <Button
                type="primary"
                className="erminalbtn"
                onClick={() => {
                  this.getTerminalmanagementList();
                }}
              >
                查询
              </Button>
            </div>
            <div>
              <Table
                style={{ paddingTop: 16 }}
                rowSelection={{
                  type: "radio",
                  selectedRowKeys: this.state.selectedRowKeys,
                  onChange: (selectedRowKeys, selectedRows) => {
                    this.onSelectChange(selectedRowKeys, selectedRows);
                  },
                }}
                columns={this.terminalcolumns}
                dataSource={this.dataSouce}
                pagination={{
                  pageSize: this.pageSize,
                  total: this.total,
                  showSizeChanger: true,
                  current: this.pageIndex,
                  onChange: (page: number) => {
                    this.pageIndex = page;
                    this.getTerminalmanagementList();
                  },
                }}
              />
            </div>
          </div>
        </Modal>
      </>
    );
  }
  componentWillMount() {
    this.getTerminalmanagementList();
  }
  shouldComponentUpdate(newProps, newState) {
    if (newProps.visible !== this.props.visible) {
      this.setState({ visible: newProps.visible });
    }
    return true;
  }
  //提交
  onSubmit() {
    if (this.state.selectedRowKeys.length > 0) {
      let data = {
        visible: false,
        terId: this.state.selectedRowKeys[0],
        typeId: this.state.typeId,
      };

      this.props.onTerOk(data);
      this.setState({ selectedRowKeys: [], typeId: "" });
    } else {
      message.error("请至少选择一个终端");
    }
  }
  //选择操作的设备
  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({ selectedRowKeys, typeId: selectedRows[0].typeId });
  };
  //获取弹窗终端列表
  //terminaldatalist
  async getTerminalmanagementList() {
    let _this = this;
    let pream = {
      pageIndex: this.pageIndex,
      pageSize: this.pageSize,
      queryData: {
        address: "",
        assetId: "",
        assetNo: "",
        createBy: "",
        createTime: 0,
        id: 0,
        installAdd: "",
        ipAdd: "",
        modifyBy: "",
        modifyTime: 0,
        name: this.attr,
        no: "",
        peId: 0,
        pwd: "",
        sim: "",
        typeId: 0,
      },
    };
    try {
      let res: any = await terminalmanagementList(pream).catch((err) => {});
      let json: AjaxData = res;
      if (json.success) {
        _this.dataSouce = ergodicListAddIdToKey(json.data.records);
        _this.total = json.data.total;
        _this.forceUpdate();
      } else {
        Modal.error({
          title: json.message,
          onOk: () => {},
        });
      }
    } catch (error) {
      Modal.error({
        title: "初始化程序失败，无法读取数据，请刷新页面。",
        onOk: () => {},
      });
      console.error(error);
    }
  }
}

export default ModalTerminalRedio;
